<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>添加图片</title>
    <link rel="stylesheet" type="text/css" href="css/hui.css" />
    <script type="text/javascript" src="js/svg.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<style>
    section {
        /* width: 1200px;
        margin: 200px auto; */
    }

    article {
        /* border: 1px solid #ccc;
        padding: 20px; */
    }

    .icon {
        width: 2em;
        height: 2em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    .item {
        float: left;
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;
        /* background: pink; */
        text-align: center
    }

    .addImg {
        width: 100px;
        height: 100px;
    }

    .upload_input {
        display: none;
    }

    .preview {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
    }

    .click {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        z-index: 1;
        cursor: pointer;
    }

    .delete {
        position: absolute;
        right: -2rem;
        top: -1rem;
        cursor: pointer;
        display: none;
    }

    .preview img {
        width: 5em;
        height: 5em;
        vertical-align: -2.15em;
        fill: currentColor;
        overflow: hidden;
    }

    .flex {
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* height: 200px; */
        /* background: pink; */
    }
</style>

<body>
    <header class="hui-header">
        <div id="hui-back"></div>
        <h1>添加图片</h1>
    </header>
    <div style="! overflow: auto;" class="hui-wrap">
        <div style="width: 100%;height:100px;position: relative;">
            <input type="text" style="width: 100%;height: 100px;border: none;">
        </div>
        <section>
            <article>
                <div class="flex">
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="file" class="upload_input" onChange="preview(this)">
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="file" class="upload_input" onChange="preview(this)">
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="file" class="upload_input" onChange="preview(this)">
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="flex">
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="file" class="upload_input" onChange="preview(this)">
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="file" class="upload_input" onChange="preview(this)">
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="file" class="upload_input" onChange="preview(this)">
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                </div>



                <div style="clear: left;"></div>
            </article>
        </section>
    </div>

    <script type="text/javascript">
        <!--hui.accordion(true, true);-->
        //选择图片
        var loadImg = function (obj) {
            $(obj).parent().find(".upload_input").click();
        }
        //删除
        var deleteImg = function (obj) {
            $(obj).parent().find('input').val('');
            $(obj).parent().find('.preview').html('');
            $(obj).hide();
        }
    </script>

    <!-- 预览 -->
    <script type="text/javascript">
        function preview(file) {
            var prevDiv = $(file).parent().find('.preview');
            if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    prevDiv.html('<img src="' + evt.target.result + '" />');
                }
                reader.readAsDataURL(file.files[0]);
            } else {//IE
                prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
            }
            $(file).parent().find('.delete').show();
        }
    </script>
</body>

</html>